<script setup>
import {ref} from 'vue'
import {Handle, Position} from '@vue-flow/core'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  detail: {
    type: Boolean,
    required: true
  }
})

const card_name = ref('')
const card_class = ref('')

function formatCardName() {
  // console.log('type:', props.data.type)
  switch (props.data.type) {
    case 100:
      return '图文'
    case 101:
      return 'GPS卡'
    case 102:
      return '蓝牙卡'
    case 103:
      return '确认卡'
    case 104:
      return '密钥卡'
    case 105:
      return '填空题'
    case 106:
      return '扫一扫'
    case 107:
      return '摇一摇'
    case 200:
      return '选择题'
    case 201:
      return '普通分支'
    case 202:
      return '正确分支'
    case 203:
      return '提示分支'
    case 204:
      return '道具'
    case 300:
      return '结束'
    case 301:
      return '晋级卡'
  }
}

function formatCardClass() {
  // console.log('type:', props.data.type)
  switch (props.data.type) {
    case 100:
      return 'bg-primary text-white'
    case 101:
      return 'bg-orange text-white'
    case 102:
      return 'bg-orange-7 text-white'
    case 103:
      return 'bg-orange-8 text-white'
    case 105:
      return 'bg-orange-8 text-white'
    case 106:
      return 'bg-orange-8 text-white'
    case 107:
      return 'bg-orange-8 text-white'
    case 200:
      return 'bg-purple text-white'
    case 201:
      return 'bg-purple text-white'
    case 202:
      return 'bg-green text-white'
    case 203:
      return 'bg-purple text-white'
    case 204:
      return 'bg-blue text-white'
    case 300:
      return 'bg-pink text-white'
    case 301:
      return 'bg-blue text-white'
  }
}

card_name.value = formatCardName()
card_class.value = formatCardClass()
</script>

<template>
  <div>
    <q-card class="my-card">
      <q-card-section :class="card_class">
        <div class="text-h8">{{card_name}}</div>
        <div class="text-subtitle2" v-if="data.type!==300">{{data.memo}}</div>
      </q-card-section>

      <q-card-section v-if="data.type!==300&&detail">
        {{ data.content }}
      </q-card-section>
    </q-card>

    <Handle id="a" type="target" :position="Position.Top"/>
    <Handle v-if="(data.type!==300)&&(data.type!==203)" id="b" type="source" :position="Position.Bottom"/>
  </div>
</template>

<style lang="sass" scoped>
.my-card
  width: 100%
  max-width: 400px
</style>
